<template>
    <view class="page">
        <view class="bg-box">
            <image :lazy-load="true" class="bg" :src="imgBaseUrlV2 + 'wode_bg1.png?v=1'" mode="widthFix"></image>
        </view>
        <view class="page-head">
            <statusBar></statusBar>
            <view style="display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;">
                <image src="/static/images/logo.png" style="width: 138rpx;height: 40rpx;margin-left: 20rpx;"></image>
                <view></view>
                <view></view>
            </view>
        </view>

        <view class="info-view">
            <view class="info">
                <view class="mine-info" @click="clickUser">
                    <view :lazy-load="true" class="avatar" :style="{
              backgroundImage: `url(${
                userInfo && userInfo.avatar
                  ? userInfo.avatar
                  : imgBaseUrlV1 + 'mine-avatar.png'
              })`,
            }" mode="widthFix"></view>

                    <view class="bd">
                        <block v-if="userInfo.id">
                            <view class="name">
                                <text class="user-name">{{ userInfo.name }}</text>
                            </view>

                            <view class="time" v-if="userInfo.expiry_date">到期时间: {{ expiry_date }}</view>
                        </block>

                        <text class="user-name" v-else>请登录</text>
                    </view>
                    <view class="ft">
                        <image :src="imgBaseUrlV2 + 'arrow-right-white.png'" mode="widthFix" class="icon" />
                    </view>
                </view>
            </view>
        </view>

        <view class="equipment-infos">
            <view class="equipment-info" v-for="(item, index) in infos" :key="index" @click="onClickTabs(item.id)">
                <text class="num" v-if="userInfo.id"
                    :class="[(dataInfo[item.key] > 0 && item.key == 'deviceWarningCount') ? 'active' : '']">{{ dataInfo[item.key] || 0 }}</text>
                <text class="num" v-else>0</text>
                <text class="title">{{ item.name }}</text>
            </view>
        </view>

        <view class="functions">
            <block v-for="(item, index) in dataList" :key="index">
                <view class="fun" @click="onClickFunc(item, index)" v-if="!item.hide">
                    <image :lazy-load="true" class="left-icon" :src="item.icon" mode="widthFix"></image>
                    <text class="title">{{ item.name || "" }}</text>
                    <text class="desc">{{ item.desc || "" }}</text>
                    <image :src="imgBaseUrlV2 + 'arrow.png'" mode="widthFix" class="icon" />
                </view>
            </block>
        </view>
        <Message ref="message"></Message>
    </view>
</template>

<script>
    import detailModule from "@/common/mixins/detail-module";
    import statusBar from "@/components/public/status-bar/status-bar";
    import {
        getUser
    } from "@/common/api/user.js";
    import {
        mapState,
        mapMutations,
        mapActions
    } from "vuex";
    import {
        imgBaseUrl,
        imgBaseUrlV1,
        imgBaseUrlV2
    } from "@/common/config";
    const system = uni.getSystemInfoSync();
    let statusBarHeight = system.statusBarHeight;
    // #ifdef MP-WEIXIN
    let custom = uni.getMenuButtonBoundingClientRect();
    statusBarHeight = custom.top;
    // #endif
    export default {
        mixins: [detailModule],
        components: {
            statusBar
        },
        data() {
            return {
                imgBaseUrl,
                imgBaseUrlV1,
                imgBaseUrlV2,
                statusBarHeight,
                infos: [{
                        key: "deviceTotal",
                        // key: "warning_num",
                        name: "设备总数",
                        permission: "Device/getDeviceList",
                        id: 1,
                    },
                    {
                        key: "deviceOnlineCount",
                        // key: "warning_num",
                        name: "设备在线",
                        permission: "Device/getDeviceList",
                        id: 2,
                    },
                    {
                        key: "deviceOfflineCount",
                        // key: "repair_num",
                        name: "设备离线",
                        permission: "Device/getDeviceList",
                        id: 3,
                    },
                    {
                        key: "deviceWarningCount",
                        // key: "repair_num",
                        name: "设备报警",
                        permission: "Device/getDeviceList",
                        id: 4,
                    }
                ],
                dataList: [
                    // {
                    //   path: "/pages/permission-management/permission-management",
                    //   icon: imgBaseUrlV2 + "wode_quanxian.png",
                    //   hide: false,
                    //   name: "权限管理",
                    //   desc: "查看人员",
                    // },
                    // {
                    //   path: "/pages/service-order/service-order",
                    //   icon: imgBaseUrlV2 + "wode_order.png",
                    //   name: "服务订单",
                    //   desc: "查看记录",
                    //   permisson: "ServiceList/serviceDeviceList",
                    //   hide: true,
                    // },
                    // {
                    //   path: "/pages/equipmet-type/equipmet-type",
                    //   icon: imgBaseUrlV2 + "wode_fenlei.png",
                    //   name: "设备分类",
                    //   desc: "自定义分类",
                    //   permisson: "DeviceCategory/getDeviceCategory",
                    //   hide: true,
                    // },
                    // {
                    //   icon: imgBaseUrlV2 + "wode_xiaoxi.png",
                    //   name: "我的消息",
                    //   functionName: "redirectNotice",
                    //   permisson: "DeviceCategory/getDeviceCategory",
                    //   hide: true,
                    // }, 
                    {
                        icon: imgBaseUrlV2 + "wode_xiaoxi.png",
                        name: "我的消息",
                        path: "/pages/notice/notice",
                        permisson: "DeviceCategory/getDeviceCategory",
                        hide: true,
                    },
                    // {
                    //   path: "/pages/mine/modify",
                    //   icon: imgBaseUrlV2 + "wode_mima.png",
                    //   name: "修改密码",
                    //   permisson: "DeviceCategory/getDeviceCategory",
                    //   hide: false,
                    // },
                    {
                        path: "/pages/problem-feedback/problem-feedback",
                        icon: imgBaseUrlV2 + "wode_fankui.png",
                        name: "问题反馈",
                        permisson: "Advice/addAdvice",
                        hide: true,
                    },
                    {
                        path: "/pageA/service-agreement/service-agreement",
                        icon: imgBaseUrlV2 + "wode_xieyi.png",
                        name: "服务协议",
                    },
                ],
                dataInfo: {
                    device_service_num: 0,
                    device_warning_num: 0,
                    message_unRead_num: 0,
                    device_repair_num: 0,
                },
                pageHeadStyle: {
                    backgroundColor: "",
                },
                mixinViewOptions: {
                    getURL: "/getDeviceInfo",
                    // getURL: "/getDeviceBasicInfo",
                    isShowLoading: false,
                    reachBottom: false,
                    createdIsNeed: false,
                    pullDown: false,
                },
            };
        },
        async mounted() {
            this.onReload();
            this.initData();
        },
        computed: {
            ...mapState("User", ["userInfo", "token", "permissions"]),
            expiry_date() {
                return this.userInfo.expiry_date ?
                    this.$moment(this.userInfo.expiry_date).format("YYYY-MM-DD") :
                    "";
            },
        },
        methods: {
            ...mapMutations("User", ["logout"]),
            ...mapActions("User", ["getUserInfo"]),
            fetchComplete(err, data) {
                console.log(data, "fe");
            },
            onReload() {
                const that = this;
                uni.$on("reload-mine", (data) => {
                    this.initData();
                });
            },
            onClickTabs(id) {
                this.openEquipmentList(id)
            },
            openEquipmentList(type) {
                switch (type) {
                    case 2: // 设备异常
                        break;
                    case 1: // 即将维保
                        break;
                    case 3: // 设备数量
                        break;
                    case 4: // 我的关注
                        break;
                }
                uni.navigateTo({
                    url: "/pages/equipment-list/equipment-list?type=" + type,
                });
            },
            async pullDownRefresh() {
                await this.initData();
                uni.$emit("stopPullDownRefresh");
            },
            pageShow() {
                this.initData();
            },
            async onChangePage() {
                await this.getUserInfo()
                    .then((res) => {
                        this.initPermission();
                    })
                    .catch((err) => {});
                if (this.userInfo.id) {
                    this.getDataInfo();
                }
                console.log("onChangePage mind", this.loadingFinish);
                if (this.loadingFinish) {}
                uni.$emit("hideLoading");
                this.loadingFinish = true;
            },
            async initData() {
                if (!this.userInfo.id && this.token) {
                    await this.getUserInfo().catch((err) => {});
                }

                if (this.userInfo.id) {
                    this.getDataInfo();
                }
                this.initPermission();
                uni.$emit("hideLoading");
            },
            initPermission() {
                this.dataList[0].hide = !this.userInfo || !this.userInfo.is_super;
                this.dataList.forEach((i) => {
                    if (i.permisson) {
                        console.log(
                            this.$hasPermission(i.permisson),
                            i.permisson,
                            this.permissions
                        );
                        i.hide = !this.$hasPermission(i.permisson);
                    }
                });
            },
            redirectNotice() {
                uni.$emit("change-page", 3);
            },
            openPage(page) {
                uni.navigateTo({
                    url: page,
                });
            },
            openEquipmentList(type) {
                switch (type) {
                    case 3: // 设备总数
                        break;
                    case 2: // 设备异常
                        break;
                    case 1: // 即将维保
                        break;
                }

                uni.navigateTo({
                    url: "/pages/equipment-list/equipment-list?type=" + type,
                });
            },
            onClickInfo(item, index) {
                if (item.permission && !this.$hasPermission(item.permission)) {
                    return this.message.error("无权限操作!");
                }
                if (index < 2) {
                    this.openEquipmentList(index ? 1 : 2);
                } else if (index == 2) {
                    this.openPage("/pages/service-order/service-order");
                } else {
                    this.redirectNotice();
                }
            },
            onClickFunc(item, index) {
                if (item.path) {
                    this.openPage(item.path);
                } else if (
                    item.functionName &&
                    typeof this[item.functionName] === "function"
                ) {
                    this[item.functionName]();
                }
            },
            clickUser() {
                if (!this.userInfo.id) {
                    // this.openPage("/pages/login-by-phone/login-by-phone");
                    this.openPage("/pages/login/index");
                } else {
                    this.openPage("/pages/my-info/my-info");
                }
            },
            onScroll(e) {
                let scrollTop = e.scrollTop;
                let opacity = 0;
                console.log(scrollTop, "?scrollTop");
                if (scrollTop >= 130) {
                    if (scrollTop > 160) {
                        scrollTop = 160;
                    }
                    opacity = (scrollTop - 110) / 30;
                    if (opacity > 1) {
                        opacity = 1;
                    }
                }
                this.pageHeadStyle.backgroundColor = `rgba(84, 151, 237, ${opacity})`;
            },
        },
    };
</script>

<style lang="stylus" scoped>
    @import '~@/common/stylus/mixins';
    @import '~@/common/stylus/variable';

    .page {
        position: relative;
        min-height: calc(100vh - var(--window-top));
        padding-bottom: 50rpx;
        background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
    }

    .bg-box {
        overflow: hidden;

        .bg {
            position: absolute !important;
            width: 100%;
        }
    }

    .info-view {
        padding: 60rpx 30rpx 30rpx;
        border-radius: 10rpx;
        overflow: hidden;

        .info {
            position: relative;
            padding-top: 170rpx;

            .mine-info-bg {
                position: absolute;
                z-index: 1;
                width: 100%;
                height: 100%;
            }

            .mine-info {
                position: relative;
                z-index: 2;
                display: flex;
                flex-direction: row;
                align-items: center;

                .avatar {
                    flex: 0 0 130rpx;
                    width: 130rpx;
                    height: 130rpx !important;
                    border-radius: 50%;
                    background-color: #fff;
                    border: 1px solid #eee;
                    background-size: cover;
                }

                .bd {
                    flex: 1;
                    margin: 0 30rpx;
                    color: #fff;
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;

                    .time {
                        margin-top: 12rpx;
                    }
                }

                .user-name {
                    flex: 1;
                    margin: auto;
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #fff;
                    letter-spacing: 3rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: bold;
                    no-wrap();
                }

                >.ft {
                    flex: 0 0 auto;

                    >.icon {
                        display: block;
                        width: 38rpx;
                        height: 38rpx;
                    }
                }
            }
        }
    }

    .equipment-infos {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        text-align: center;
        color: color-white;
        margin: 0 24rpx;
        height: 160rpx;
        background: #1A3156;
        box-shadow: 0px 0px 10rpx 10rpx rgba(0, 0, 0, 0.03);
        border-radius: 10rpx;

        .equipment-info {
            flex: 1;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                width: 3rpx;
                height: 30rpx;
                margin-top: -15rpx;
                background-color: #fff;
            }

            &:first-child::before {
                width: 0;
                height: 0;
            }

            .num {
                position: relative;
                display: inline-block;
                line-height: 60rpx;
                font-size: 48rpx;
                line-height: 68rpx;
                // margin: 16rpx auto 0;
                margin: 22rpx auto 0;

                &.active::before {
                    content: '';
                    position: absolute;
                    width: 14rpx;
                    height: 14rpx;
                    background-color: #f56e56;
                    right: -16rpx;
                    top: 6rpx;
                    border-radius: 50%;
                }
            }

            .title {
                display: block;
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: color-white;
                margin-top: 4rpx;
            }
        }
    }

    .functions {
        padding: 0 24rpx;
        margin-top: 20rpx;

        .fun {
            display: flex;
            flex-direction: row;
            line-height: 100rpx;

            // border-bottom: 1rpx solid #f6f6f6;
            &:last-child {
                border-bottom: 0;
            }

            .left-icon {
                width: 60rpx;
                margin: auto;
            }

            .title {
                flex: 1;
                font-size: 30rpx;
                color: #fff;
                padding-left: 20rpx;
            }

            .desc {
                font-size: 26rpx;
                color: #fff;
                padding-right: 10rpx;
            }

            .icon {
                flex: 0 0 38rpx;
                margin-top: 30rpx;
            }
        }
    }

    .page-head {
        position: fixed;
        z-index: 998;
        width: 100%;
        line-height: 64rpx;
        left: 0;
        top: 0;
        text-align: center;
        font-size: 36rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        transition: all 0.3s;
        color: #fff;
        padding-bottom: 12rpx;
    }
</style>